<template>
  <Teleport to="body">
    <div v-if="modelValue" class="modal" :class="{ expanded }" @click.self="handleMaskClick">
      <div class="modal-content" :style="contentStyle">
        <div class="modal-header" v-if="showHeader">
          <slot name="header">
            <h3>{{ title }}</h3>
            <div>
              <button class="expand-button" @click="toggleExpand">
                <i class="icon-expand"></i>
              </button>
              <button
                v-if="showClose"
                @click="handleClose"
                class="close-button"
                aria-label="关闭弹窗"
              >
                <i :class="closeIcon"></i>
              </button>
            </div>
          </slot>
        </div>

        <div class="modal-body" :style="bodyStyle">
          <slot></slot>
        </div>

        <div class="modal-footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

const props = withDefaults(defineProps<{
  modelValue: boolean
  title?: string
  width?: number | string
  maxHeight?: number | string
  showHeader?: boolean
  showClose?: boolean
  closeIcon?: string
  clickMaskClose?: boolean
}>(), {
  title: '提示',
  width: '1000px',
  maxHeight: '90vh',
  showHeader: true,
  showClose: true,
  closeIcon: 'fas fa-times',
  clickMaskClose: true
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const expanded = ref(false)

const contentStyle = computed(() => {
  if (expanded.value) {
    return {
      width: '100%',
      height: '100vh',
      maxHeight: '100vh',
      borderRadius: '0'
    }
  }
  return {
    width: typeof props.width === 'number' ? `${props.width}px` : props.width,
    maxHeight: typeof props.maxHeight === 'number'
      ? `${props.maxHeight}px`
      : props.maxHeight
  }
})

const bodyStyle = computed(() => ({
  maxHeight: expanded.value
    ? 'none'
    : `calc(${props.maxHeight} - 100px)`
}))

const toggleExpand = () => {
  expanded.value = !expanded.value
}

const handleClose = () => {
  emit('update:modelValue', false)
  emit('close')
}

const handleMaskClick = () => {
  if (props.clickMaskClose) {
    handleClose()
  }
}

watch(() => props.modelValue, (newVal) => {
  if (!newVal) {
    expanded.value = false
  }
})
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  backdrop-filter: blur(2px);
}



.modal.expanded {
  align-items: stretch;
}

.modal.expanded .modal-content {
  border-radius: 0;
}

.modal-content {
  background-color: var(--component-background);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-color);
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  flex-direction: column;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  height: 40px;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
height: 100%;
  max-height: calc(100vh - 100px);
  transition: all 0.3s;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* WebKit浏览器滚动条样式 */
.modal-body::-webkit-scrollbar {
  height: 8px; /* 水平滚动条高度 */
  background: transparent; /* 隐藏默认背景 */
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
  margin: 2px 0; /* 添加边距使滚动条与内容保持距离 */
}

.modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  border: 1px solid #e0e0e0; /* 添加边框效果 */
  transition: background 0.3s ease;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Firefox滚动条样式 */
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* 滚动条悬停时显示阴影效果 */
.modal-body:hover::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

/* 添加滚动内容的过渡效果 */
.modal-body > * {
  transition: transform 0.2s ease;
}




.modal-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.close-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text);
  transition: color 0.2s;
}

.close-button:hover {
  color: var(--hover-color);
}

.close-button i {
  font-size: 1.5em;
}
.expand-button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
  margin-right: 10px;
}

.expand-button:hover {
  color: var(--hover-color);
}

.expand-button i{
  font-size: 1.5em;

}
.icon-expand::after {
  content: '⤢';
}

.modal.expanded .icon-expand::after {
  content: '⤡';
}
</style>
